<script setup lang="ts">
import type { Ref } from 'vue';
import window from './app/Window.vue';
import { ref } from 'vue';
const props =defineProps<{
	icon:object,
	iconSrc:string,
	title:string,
	source?:string,
	content?:object
}>()
interface WindowComponent {
	showWindow({}): void;
   }
const myWindow:Ref<WindowComponent> = ref({} as WindowComponent);

// const emit = defineEmits<{
// 	(e: 'clickme', source: string): void
// }>();

function dblclick(){
	myWindow.value&&	myWindow.value.showWindow({source:props.source,content:props.content,icon:props.icon});
	// console.log(myWindow)
	console.log('双击'); 
	// emit('clickme', props.source);
}
</script>

<template>  		
	<div class="desktop-item" @dblclick="dblclick">
		<div class="item">
			<div v-if="iconSrc" class="icon" :style="`background-image:url(${iconSrc})`"></div>
			<div v-if="icon" class="icon">
				<component :is="icon"></component>
			</div>
			<div class="title">{{ title }}</div>
		</div>
	</div>
	<window ref="myWindow" :icon="icon"/>
</template>

<style scoped>

		.desktop-item{
			width: 100%;
			height: 100%;
			display: flex;
			
		}
		.desktop-item .item:hover{
			border-radius: 1em;
			background-color: #cccccc55;
		}
		.desktop-item .item{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 0.8em;
		}
		.desktop-item .item .icon{
			width: 5em;
			height: 5em;
			/* background-color: #023dbd; */
			border-radius: 10%;
			background-repeat: no-repeat;
		}
		.desktop-item .item .title{
			/* font-weight: bold; */
			font-size: 1.2em;
			color: #fff;
			text-shadow: -1px 1px 0.2em #000;
		}
</style>